import React, { useState } from 'react';
import {
  Form, Input, Button, Select
} from 'antd';

const { Option } = Select;

function Filter({ filter, clearFilter }) {
  const [protocol, setProtocol] = useState('all');
  const [status, setStatus] = useState('all');
  const [serverName, setServerName] = useState('');
  const [serverTag, setServerTag] = useState('');

  return (
    <div style={{ margin: '10px 0' }}>
      <Form layout="inline">
        <Form.Item label="服务状态">
          <Select
            defaultValue="all"
            value={status}
            style={{ width: 120 }}
            onChange={(val) => {
              setStatus(val);
            }}
          >
            <Option value="all">全部</Option>
            <Option value="UP">UP</Option>
            <Option value="DEAD">DEAD</Option>
          </Select>
        </Form.Item>
        {/* <Form.Item label="协议">
          <Select
            defaultValue="all"
            value={protocol}
            style={{ width: 120 }}
            onChange={(val) => {
              setProtocol(val);
            }}
          >
            <Option value="all">全部</Option>
            <Option value="HTTP">HTTP</Option>
            <Option value="HTTPS">HTTPS</Option>
          </Select>
        </Form.Item> */}
        <Form.Item label="服务名称">
          <Input
            placeholder="服务名称"
            value={serverName}
            onChange={(val) => {
              setServerName(val.target.value);
            }}
          />
        </Form.Item>
        <Form.Item label="业务域标识">
          <Input
            placeholder="业务域标识"
            value={serverTag}
            onChange={(val) => {
              setServerTag(val.target.value);
            }}
          />
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            onClick={() => {
              filter({
                serverTag, status, serverName
              });
            }}
          >
            过滤
          </Button>
          {' '}
          <Button
            type="primary"
            onClick={() => {
              setServerName('');
              setServerTag('');
              setProtocol('all');
              setStatus('all');
              clearFilter();
            }}
          >
            清理过滤
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default Filter;